import { useAppDispatch } from '@/Hooks/hook'
import {
  fetchBannerDataAction,
  fetchHotRecommendAction,
  fetchNewAlbumAction,
  fetchRankingDataAction,
  fetchSettleSingerAction
} from '@/stores/modules/recommend'
import { memo, useEffect } from 'react'
import type { ReactNode, FC } from 'react'
import TopBanner from './components/banner'
import { RecommendWrapper } from './style.ts'
import HotRecommend from './components/hot-recommend'
import NewAlbum from './components/new-album/index.tsx'
import TopRanking from './components/top-ranking/index.tsx'
import UserLogin from './components/user-login/index.tsx'
import SettleSinger from './components/settle-singer/index.tsx'
import HotAnchor from './components/hot-anchor/index.tsx'

interface IProps {
  children?: ReactNode
}

const Recommend: FC<IProps> = () => {
  //获取轮播图数据
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchBannerDataAction())
    dispatch(fetchHotRecommendAction())
    dispatch(fetchNewAlbumAction())
    dispatch(fetchRankingDataAction())
    dispatch(fetchSettleSingerAction())
  }, [])
  return (
    <div>
      {/* 轮播图 */}
      <TopBanner></TopBanner>
      <RecommendWrapper>
        <div className="content wrap-v2">
          <div className="left">
            {/* 热门推荐 */}
            <HotRecommend></HotRecommend>
            {/* 新碟上架 */}
            <NewAlbum></NewAlbum>
            {/* 榜单 */}
            <TopRanking></TopRanking>
          </div>
          <div className="right">
            <UserLogin></UserLogin>
            <SettleSinger></SettleSinger>
            <HotAnchor></HotAnchor>
          </div>
        </div>
      </RecommendWrapper>
    </div>
  )
}

export default memo(Recommend)
